<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>建筑猎聘兼职页面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/dist/style/map-10925a5ecc.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="h_first">
        <div class="f_left">
            <a href="javascript:;">
                <img src="/dist/images/logo_lp.png">
            </a>
            <span>
                           中国建筑界最大的人才数据库平台
                                <br>
                           已有<em>18000</em>位建筑业的中高端人才加入了这个平台
                       </span>
        </div>
        <div class="f_right">
            
          <ul class="nav nav-pills">
            <li class="actives active"><a href="javascript:;">首页</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                职位管理 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="javascript:;">已发布</a></li>
                <li><a href="javascript:;">已上架</a></li>
                <li><a href="javascript:;">审核中</a></li>
                <li><a href="javascript:;">审核失败</a></li>
                
                
              </ul>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                收藏夹 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="javascript:;">人才收藏</a></li>
                <li><a href="javascript:;">新闻收藏</a></li>
              
              </ul>
            </li>
      
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                简历管理 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="javascript:;">搜索简历</a></li>
                <li><a href="javascript:;">全职简历</a></li>
                <li><a href="javascript:;">兼职简历</a></li>
                
               
              </ul>
            </li>
            <li class="use">
              <img class="useImg" src="/dist/images/headerImg.png">
              <div class="mes" style="display:none">
                <div class="mess">
                  <div class="cd1">
                    <ul> 
                      <li>
                        <img class="touxiang" src="/dist/images/headerImg.png">
                      </li>
                      <li>
                        <p>网络科技有限公司</p>
                        <p>2018-11-11  到期</p>
                      </li>
                      <li>
                         <span>黄金会员</span>
                         <p><a href="javascript:;">会员权益 ></a></p>
                      </li>
                    </ul>
                  </div>
                  <div class="cd2">
                    <div class="li">
                      <p><img src="./dist/images/ioc1.png"></p>
                      <a href="javascript:;">企业信息</a>
                    </div>
                    <div class="li">
                      <p><img src="./dist/images/ioc2.png"></p>
                      <a href="javascript:;">账户安全</a>
                     
                    </div>
                    <div class="li">
                      <p><img src="./dist/images/ioc3.png"></p>
                      <a href="javascript:;">资产信息</a>
                    
                    </div>
                    <div class="li">
                      <p><img src="./dist/images/ioc4.png"></p>
                      <a href="javascript:;">消息中心</a>
                     
                    </div>
                  </div>
                  <div class="cd3">
                    <a href="javascript:;">退出登录</a>
                  </div>
                </div>
              </div>
               
            </li></ul></div>
          
            
          
    </div> 

    <div class="count">
            <div class="detal">
      
               <div class="inform">
                 
                 <span class="mes"><img src="/dist/images/icon1.png"> Sunyuklong先生，系统检测到您的账户内还有 10 职位数未使用，是时候该主动出击发布职位寻找合适候选人～ ！<a href="javascript:;">立即使用</a></span>
               </div>
              
               <div class="nav">
                 <a href="javascript:;" class="company active">企业信息</a>
                 <a href="javascript:;" class="message">联系人信息</a>
                 <a href="javascript:;" class="safty">账户安全</a>
               </div>
               
               <div class="input name">
                 <div class="left">
                   企业名称
                 </div>
                 <div class="right">
                   <p class="ts0"><input type="text" class="form-control" placeholder="Text input"><a href="javascript:;" class="changeC">修改</a></p>
                   <p class="ts1"><em>*</em>企业名称与证照名称必须一致，如不一致，请点击后方按钮修改</p>
                  </div>
                 
               </div>

               <div class="input logo">
                  <div class="left">
                   营业执照
                    </div>
                    <div class="right">
                       <p><button type="button" class="btn btn-default">上传图片</button>图片要求以GIF,PNG 或JPG格式，大小限制在3M以内</p> 
                       <div class="photos">
                         <img src="/dist/images/map02.png" alt="营业执照" class="act">
                         <p class="act2" style="display:none">
                            <img src="/dist/images/map01.png" alt="选择" class="act2s">
                         </p>
                       
                       </div>
                       <div class="tx">
                         <em>*</em>确保单位名称与提交审核公司一致；如为复印件、黑白扫描件，需加盖单位公章；<br>
                         不可使用屏幕截图或翻拍图片提交审核；上传图片不可有与建筑猎聘无关的标注或水印；<br>
                         不可使用电子版营业执照提交审核；所上传执照照片，信息需清晰完整。<br>
                       </div>
                       <div class="tx2">
                          企业营业执照仅用于审核,不会向第三方透露,请放心上传！
                       </div>

                     </div>
              </div>

          
              <div class="input web">
                  <div class="left">
                   企业官网
                    </div>
                    <div class="right">
                        <input type="text" class="form-control" placeholder="Text input">
                    </div>
              </div>

              <div class="input address">
                  <div class="left">
                   所在城市
                    </div>
                    <div class="right">
                        <form class="form-inline">
                            <div data-toggle="distpicker">
                              <div class="form-group">
                                <label class="sr-only" for="province2">Province</label>
                                <select class="form-control" id="province2" data-province="广东省"></select>
                              </div>
                              <div class="form-group">
                                <label class="sr-only" for="city2">City</label>
                                <select class="form-control" id="city2" data-city="---- 选择市 ----"></select>
                              </div>
                              <div class="form-group">
                                <label class="sr-only" for="district2">District</label>
                                <select class="form-control" id="district2" data-district="---- 选择区 ----"></select>
                              </div>
                            </div>
                          </form>
                     </div>
              </div>
 
              <div class="input detail">
                  <div class="left">
                   详细地址
                    </div>
                    <div class="right">
                       <p><input type="text" id="detaAdress" class="form-control" placeholder="Text input"></p> 
                       <div class="map" id="test">
                         
                       </div>
                     </div>
              </div>

              <div class="input intro">
                  <div class="left">
                   企业介绍
                    </div>
                    <div class="right">
                        <textarea class="form-control" rows="5"></textarea>
                     </div>
              </div>
            
              <div class="btnPull">
                <button type="button" class="btn btn-primary pull">提交修改</button>
                <button type="button" class="btn btn-default">放回</button>
              </div>
            </div>
          
          </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="/dist/js/distpicker.data.js"></script>
	  <script src="/dist/js/distpicker.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="/dist/js/com.js"></script>

    <script>
      var map,markersArray = [];
      var comjw= {};
        $(function(){
            let big = $('.use .mes');
            let use = $('.useImg');
            use.mouseenter(()=>{
                big.show();
            });
            big.mouseleave(()=>{
                big.hide();
            });

           /** 创建地图*/
           console.log("new",new qq.maps.LatLng(39.916527, 116.397128))
             map = new qq.maps.Map(document.getElementById('test'),{
                center: new qq.maps.LatLng(39.916527, 116.397128),//将经纬度加到center属性上
                zoom: 12,//缩放   
                draggable: true,//是否可拖拽
                scrollwheel: true,//是否可滚动缩放
                disableDoubleClickZoom: false
            })

               mrdd(map) /**自动到IP的地图地址*/

                      //添加dom监听事件
              qq.maps.event.addDomListener(map, 'click', function(event) {
                /**删除旧的节点*/
                   deleteOverlays()

                  addMarker(event.latLng);
                  console.log(event.latLng)//点击所获得经纬度
                  comjw = event.latLng;
              }); 

              $('#detaAdress').blur(function(){
                var _this =$(this);
                var m1 = $("#province2  option:selected").text();
                var m2 = $("#city2  option:selected").text();
                var m3 = $("#district2  option:selected").text();
                console.log(m1,m2,m3,_this.val())
                var address= `'中国,${m1}${m2}${m3},${_this.val()}'`
                getIP(address);
              })

              $('.pull').click(function(){
                console.log(comjw);
              })

                
          })


       
   

            // var citylocation = new qq.maps.CityService({
            //     //设置地图
            //     map : map,

            //     complete : function(results){
            //         console.log(9999,results)
            //     }
            // });
      



// --------------------------------组件区--------------------------------------------------------------------------------------
        function address(){
         var m1 = $("#province2  option:selected").text();
         var m2 = $("#city2  option:selected").text();
          var m3 = $("#district2  option:selected").text();
          console.log(m1,m2,m3,$(this).val())
      
        }

        function dd(map,jwds){ //添加标记跳动
          console.log('jwds',jwds);
          var marker = new qq.maps.Marker({
                position:jwds,//标记的经纬度
                animation: qq.maps.MarkerAnimation.BOUNCE,//标记的动画
                map: map//标记的地图
            })
            markersArray.push(marker);
             
        }

        function mrdd(map){
         
          citylocation = new qq.maps.CityService({
                complete : function(result){
                    map.setCenter(result.detail.latLng);//IP的经纬度
                    dd(map,result.detail.latLng);
                    comjw = result.detail.latLng;
                }
            });
            //调用searchLocalCity();方法    根据用户IP查询城市信息。
            citylocation.searchLocalCity();
          
        }




        function getIP(address){
          var geo = new qq.maps.Geocoder()
          console.log('geo',geo)
          geo.getLocation(address)//地址
          geo.setComplete(function(res){
              console.log(res,res.detail.location)//得到经纬度 放center属性
              map.panTo(res.detail.location);
              comjw=res.detail.location;
              //zoomTo()将地图缩放到指定的级别。
              map.zoomTo(15);
              /**删除旧的节点*/
              deleteOverlays()
              var marker = new qq.maps.Marker({
                position:res.detail.location,//标记的经纬度
                animation: qq.maps.MarkerAnimation.BOUNCE,//标记的动画
                map: map//标记的地图
            })
            markersArray.push(marker);
             

          })
        }

        //添加标记
        function addMarker(location) {
            var marker = new qq.maps.Marker({
                position: location,
                map: map
            });
            markersArray.push(marker);
        }

        //清除覆盖层
        function clearOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
        }

        //显示覆盖层
        function showOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(map);
                }
            }
        } 


        //删除覆盖物
        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
                markersArray.length = 0;
            }
        }
 
    </script>


</body>
</html>